<!-- 使用说明:
1.调用：
<show-model @models="自定义名称1=false" :model="自定义名称1" :confirmBtn="自定义名称2" :cancelBtn="自定义名称3" :content="自定义名称4" :getCancelFn="自定义名称5" :getConfirmFn="自定义名称6"></show-model>
2.参数说明
 (1)models:必设置，关闭弹窗。
 (2)model:必传，弹窗显隐控制，传递类型:Boolean
 (3)confirmBtn和cancelBtn：可选，分别对应确认和取消按钮的样式及文本设置，格式:{text:'',stye:''}
 (4)content:必传，格式:[{text:'',style:''},{text:'',style:''}],一个数组元素对应一行内容
 (5)getConfirmFn和getCancelFn:分别对应确认和点击事件，可选（默认仅仅只是关闭弹窗）
3.应用实例：请查看组件bottom_nav中的调用
-->
<template>
	<view class="shellModel" @tap="cancelFn" v-if="model">
		<view class="dialog" @tap.stop>
			<view class="content">
				<view class="text" v-for="(item,index) in content" :key="index" :style="item.style">{{item.text}}</view>
			</view>
			<view class="btn">
				<view class="confirm btn_a" :style="cancelBtn.style" @tap="cancelFn">{{cancelBtn.text}}</view>
				<view class="cancel btn_a" :style="confirmBtn.style" @tap="confirmFn">{{confirmBtn.text}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _this;
	export default {
		props: {
			model: { //显隐
				type: Boolean,
				default: false,
			},
			confirmBtn: { //确认按钮的文本及样式
				type: Object,
				default: {
					text: '确定',
					style: 'border-right:0rpx;border-radius:0rpx 0rpx 10rpx 0rpx'
				}
			},
			cancelBtn: { //取消按钮的文本及样式
				type: Object,
				default: {
					text: '取消',
					style: 'border-radius:0rpx 0rpx 0rpx 10rpx'
				}
			},
			content: { //内容，注意传过来的格式
				type: Array,
				default: [{
					text: '弹窗',
					style: ''
				}]
			},
			getCancelFn: { //按钮取消事件
				type: Function,
				default: res => {}
			},
			getConfirmFn: { //按钮确定事件
				type: Function,
				default: res => {}
			}
		},
		mounted() {
			_this = this;
		},
		methods: {
			confirmFn() { //确定按钮
				_this.$emit('models', false);
				this.getConfirmFn();
			},
			cancelFn() { //取消按钮
				_this.$emit('models', false);
				this.getCancelFn();
			}
		}
	}
</script>

<style>
	@import url('showModel.css');
</style>